<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-weight: bold;font-size: 20px;">DBTIME</span>
			</div>
			<div>
				<div ref="myEcharts" class="chartsBox"></div>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-weight: bold;font-size: 20px;">io</span>
			</div>
			<div>
				<div ref="myEcharts2" class="chartsBox"></div>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-weight: bold;font-size: 20px;">会话数</span>
			</div>
			<div>
				<div ref="myEcharts3" class="chartsBox"></div>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		props: {
			LineData: {
				type: Object,
			},
		},
		data() {
			return {
				networkList: [],
				cpuList: [],
				memoryList: [],
				timeList: [],
				myChart: null,
				urlList: []
			}
		},
		created() {
			// this.typeData()
		},
		// watch: {
		// 	LineData: {
		// 		deep: true,
		// 		immediate: true,
		// 		handler(newVal, Val) {
					
		// 				this.createCharts()
		// 				this.createCharts2()
		// 				this.createCharts3()
					
		// 		}
		// 	}
		// },
		mounted() {
			// console.log('数据', this.LineData)
			this.$nextTick(() => {
			this.createCharts()
			this.createCharts2()
			this.createCharts3()
			})
			this.getUrlList()
		},
		methods: {
			async createCharts() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts);
				const colors = ['#5b8ff9'];
				const option = {
					// title: {
					// 	text: 'CPU',
					// 	left: '5%',
					// 	top: '5%'
					// },
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					legend: {
						x: 'left',
						left: '5%',
					},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						//控制x轴显示个数
						// axisLabel:{
						// 	interval: 10
						// },
						data: this.LineData.dbTimeList
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '值',
						type: 'line',
						smooth: true,
						Animation: false,
						// xAxisIndex: 1,
						smooth: true,
						emphasis: {
							focus: 'series'
						},
						data: this.LineData.dbValueList
					}]
				};
				
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option,true);
				this.myChart.on('finished', () => {
					const baseUrl = this.myChart.getDataURL()
					this.urlList.push(baseUrl)
				})
			},
			createCharts2() {

				let myChart = this.$echarts.init(this.$refs.myEcharts2);
				const colors = ['#5b8ff9', '#5ad8a6'];
				const option = {
					legend: {
						x: 'left',
						left: '5%',
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.LineData.ioTimeList
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '读',
							type: 'line',
							smooth: true,
							// xAxisIndex: 1,
							emphasis: {
								focus: 'series'
							},
							data: this.LineData.ioReadList
						},
						{
							name: '写',
							type: 'line',
							smooth: true,
							// xAxisIndex: 1,
							emphasis: {
								focus: 'series'
							},
							data: this.LineData.ioWriteList
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				myChart.on('finished', () => {
					const baseUrl = myChart.getDataURL()
					this.urlList.push(baseUrl)
				})
				// console.log(this.allData)
			},
			createCharts3() {
				let myChart = this.$echarts.init(this.$refs.myEcharts3);
				const colors = ['#5b8ff9', '#5ad8a6'];
				const option = {
					legend: {
						x: 'left',
						left: '5%',
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.LineData.sessionTimeLits
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '所有会话数',
							type: 'line',
							// xAxisIndex: 1,
							smooth: true,
							emphasis: {
								focus: 'series'
							},
							data: this.LineData.sessionAllList
						},
						{
							name: '当前会话数',
							type: 'line',
							// xAxisIndex: 1,
							smooth: true,
							emphasis: {
								focus: 'series'
							},
							data: this.LineData.sessionNowList,
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				myChart.on('finished', () => {
					const baseUrl = myChart.getDataURL()
					this.urlList.push(baseUrl)
				})
				// console.log(this.allData)
			},
			getUrlList() {
				this.$emit('getUrl', this.urlList)
			},
			// dataIsCheck(data) {
			// 	console.log('确认数据', data)
			// 	//确认是否有数据
			// 	if (!data) {
			// 		console.log('确认数据', data)
			// 		// this.dataIsCheck()
			// 	}
			// }
		}
	};
</script>

<style scoped>
	.chartsBox {
		margin: 10px auto;
		width: 100%;
		height: 300px;
		background-color: white;
	}

	.box-card {
		margin-bottom: 15px;
	}
</style>
